<%--
  Created by IntelliJ IDEA.
  User: dd
  Date: 2023/5/5
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>统计</title>
    <script type="application/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.6.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/echarts.js"></script>
    <script type="text/html" id="barDemo">
        {{#  if(d.sum>=53){ }}
        <a lay-event="add" class="layui-btn layui-btn-normal layui-btn-xs">添加回访</a>
        {{#  } }}
    </script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->

<div>
    <div style="width: 610px;height:700px;float: left;">
        <div id="main" style="width: 600px;height:200px; "></div>
        <div id="circlemain" style="width: 600px;height:200px; "></div>
        <div id="left" style="width: 600px;height:280px;">
            <table class="layui-hide" id="test" lay-filter = "test"></table>
        </div>
    </div>
    <div id="right" style="width: 1000px; float: left;margin-left:40px">
<%--        <form class="layui-form" action="">--%>
<%--            <div class="layui-inline">--%>
<%--                <label class="layui-form-label">用户名</label>--%>
<%--                <div class="layui-input-inline">--%>
<%--                    <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="layui-inline">--%>
<%--                <label class="layui-form-label">电话</label>--%>
<%--                <div class="layui-input-inline">--%>
<%--                    <input type="text" name="tel" placeholder="请输入电话号码" autocomplete="off" class="layui-input">--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="layui-inline">--%>
<%--                <label class="layui-form-label">抑郁程度</label>--%>
<%--                <div class="layui-input-block">--%>
<%--                    <select name="depress"  class="layui-select">--%>
<%--                        <option value="">请选择...</option>--%>
<%--                        <option value="正常">正常</option>--%>
<%--                        <option value="轻度抑郁">轻度抑郁</option>--%>
<%--                        <option value="中度抑郁">中度抑郁</option>--%>
<%--                        <option value="重度抑郁">重度抑郁</option>--%>
<%--                    </select>--%>
<%--                </div>--%>

<%--            </div>--%>



<%--            <div class="layui-inline">--%>
<%--                <div class="layui-input-inline">--%>
<%--                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>--%>
<%--                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </form>--%>
        <%--查询条件结束--%>
        <%--存放一个table--%>
        <table class="layui-hide" id="test2" lay-filter = "test2"></table>
    </div>

</div>

<script type="text/javascript">



    layui.use(['table','layer','form','jquery','tree'], function(){
        var tree = layui.tree;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var namestatus=true;

        var depressdata=[];
        var countdata=[];
        var cicledata=[];


        table.render({
            // element  元素
            elem: '#test'
            ,url:'${pageContext.request.contextPath}/TSdsRecordDetailServlet?method=tj' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
            //,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                //{type: 'checkbox', fixed: 'left'}
                {type:'numbers',title:'编号'}
                ,{field:'count', title: '人数', sort: true,}
                ,{field:'depress', title: '抑郁倾向', sort: true,}
            ]],
            done: function(res, curr, count){

                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                //alert(JSON.stringify(res.data));

                res.data.forEach(function (item){
                    depressdata.push(item.depress);
                    countdata.push(item.count);
                    var obj={};
                    obj["value"]=item.count;
                    obj["name"]=item.depress;
                    cicledata.push(obj);
                })
                // 数据渲染完之后开始显示echart的图
                getEchartPic1();
                getEchartPic2();
            }

        });
        table.render({
            // element  元素
            elem: '#test2'
            ,page:true
            ,limit:10
            ,limits:[10,20,30]
            ,url:'${pageContext.request.contextPath}/TSdsRecordDetailServlet?method=tj2' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                // {type: 'checkbox', fixed: 'left'}
                {field:'id',title:'编号'}
                ,{field:'username', title: '用户名', sort: true}
                ,{field:'tel', title: '电话', sort: true}
                ,{field:'yqcode', title: '邀请码', sort: true}
                ,{field:'createtime', title: '做题时间', sort: true}
                ,{field:'sum', title: '得分', sort: true}
                ,{field:'depress', title: '抑郁倾向', sort: true}
                ,{fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
            ]]

        });
        //插入回访
        table.on('tool(test2)', function(obj){
            var data = obj.data //获得当前行数据
            var tel = data.tel
            if(obj.event === 'add'){
                layer.open({
                    title: '回访内容'
                    ,area: ['300px', '200px']
                    ,type:1
                        ,btn: ['确认', '取消']
                    ,content: '<textarea name="text" id="text"  required lay-verify="required" placeholder="请输入回访内容" class="layui-textarea"></textarea>'
                    ,yes:function () {
                        var text = $("#text").val();
                        layer.confirm('是否添加？', function(index){
                            $.get(
                                "${pageContext.request.contextPath}/TSdsReturnServlet?method=insert"
                                , {'tel':tel,'text':text}
                                ,function (d){
                                    if (+d.code===0){
                                        layer.confirm('添加成功');
                                        table.reload('demo');
                                    }else {
                                        layer.confirm('添加失败');
                                    }
                                }
                                ,"json"
                            )
                            layer.closeAll();
//向服务端发送删除指令
                        });
                    }
                    ,btn2:function () {
                        layer.closeAll()
                    }
                });

            }
        })

        // 查询
        form.on('submit(formDemo)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            table.reload('test2', {
                where: data.field,
                page: {
                    curr: 1 //重新从第 1 页开始
                },
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        var getEchartPic1=function (){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '抑郁分析数据'
                },
                tooltip: {},
                legend: {
                    data: ['抑郁人数']
                },
                xAxis: {
                    data: depressdata
                },
                yAxis: {},
                series: [
                    {
                        name: '抑郁人数',
                        type: 'bar',
                        data: countdata

                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        // 饼状图的填充
        var getEchartPic2=function (){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('circlemain'));

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '性格测试分析数据',
                    // subtext: '分析数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                color:["#FFB5B5","#93FF93","#ACD6FF","#FFFFCE","#EBD3E8"],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data:cicledata
                        // data: [
                        //     { value: 1048, name: 'Search Engine' },
                        //     { value: 735, name: 'Direct' },
                        //     { value: 580, name: 'Email' },
                        //     { value: 484, name: 'Union Ads' },
                        //     { value: 300, name: 'Video Ads' }
                        // ]
                        ,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }


    })


</script>
</body>
</html>
